<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            box-sizing: border-box;
        }
.box{
    width: 560px;
    height: 400px;
    background-color: pink;
    margin: 0 auto;
}
img{
    width: 100%;
    height: 320px;
    display: block;  
}
.bottom{
    height: 80px;
    padding:10px 10px 0 10px;
    background-color: green;
    position: relative;
}
.bottom p{
    margin: 0;
    margin-bottom: 10px;
    color: white;
}
.bottom-ul {
    display: flex;
    justify-content: space-between;
    padding:0;
    margin: 0;
    width: 150px;
    list-style: none;
    align-items: center;
}
.bottom-ul li{
    width: 8px;
    height: 8px;
    margin: 4px;
    border-radius: 50%;
    background: #fff;
    opacity: 0.4;
    cursor: pointer;
}
li.light{
    width: 12px;
    height: 12px;
    opacity: 1;
}
.right{
    float: right;
    /* margin-top: -15px; */
    height: 20px;
    /* margin-left: 10px; */
    position: absolute;
    bottom: 50px;
    left: 500px;
}
.left{
    float: right;
    height: 20px;
    /* margin-top: -15px; */
    position: absolute;
    bottom: 50px;
    left: 468px;

}
    </style>
</head>
<body>
    <div class="box">
    <img src="../images/course01.png">
    <div class="bottom">
        <p>对人类来说会不会太超前了?</p>
        <div>
        <button class="left"><</button>
        <button class="right">></button>
        </div>
        <ul class="bottom-ul">
            <li class="light"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    </div>
     <script>
        const sliderData = [
      { url: '../images/course01.png', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },
      { url: '../images/course02.png', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },
      { url: '../images/course03.png', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },
      { url: '../images/course04.png', title: '快来分享你的寒假日常吧~', color: 'rgb(139, 98, 66)' },
      { url: '../images/course05.png', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(67, 90, 92)' },
      { url: '../images/course06.png', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: '../images/course07.png', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },
      { url: '../images/course08.png', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },
    ]
    
    // const ran=Math.floor(Math.random()* sliderData.length)
    let i=0
    //获取元素
    const img=document.querySelector('img')

    const p=document.querySelector('p')

    const bc = document.querySelector('.bottom')

    const left=document.querySelector('.left')
    const right=document.querySelector('.right')
    //封装函数
function fn(){
       img.src=sliderData[i].url
    p.innerHTML=sliderData[i].title
    bc.style.backgroundColor = sliderData[i].color
    //删除小圆点
    const scli=document.querySelector('ul .light')
    scli.classList.remove('light')
    //添加小圆点
    const li=document.querySelector(`li:nth-child(${i+1})`)
    li.classList.add('light')
}
//左侧点击
    left.addEventListener('click',function(){
        //  if(i<0){
        //     i=7
        //  }else{i=i}
         i=i<0?7:i
   fn()
   i--
    })
 //右侧点击
    right.addEventListener('click',function(){
        //  if(i>=8){
        //     i=0
        //  }else{i=i}
        i=i>=8?0:i
fn()
   i++
    })
//自动播放
   let time=setInterval(function (){

    // if(i>=sliderData.length){
    //     i=0
    // } 
     right.click()
    // i++
    },1000)
//停止定时器
    const box=document.querySelector('.box')
    box.addEventListener('mouseenter',function(){
        clearInterval(time)
    })
//开启定时器
    box.addEventListener('mouseleave',function(){
      if(time)clearInterval(time)
        time=setInterval(function (){

    // if(i>=sliderData.length){
    //     i=0
    // } 
     right.click()
    // i++
    },1000)
    })
    
     </script>
</body>
</html>